﻿<template>
    <!--//使用记录-->
    <div>
        <div class="big_box">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>车辆管理</el-breadcrumb-item>
                <el-breadcrumb-item>使用记录</el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider></el-divider>
            <el-form class="demo-form-inline" :model="Sel" label-width="140px">
                <el-row :gutter="24" class="row-bg">
                    <el-col :span="3">
                        <el-select placeholder="请选择使用人" filterable v-model="Sel.UserId">
                            <el-option :value="0" label="请选择使用人"></el-option>
                            <el-option v-for="v in $store.state.AllUsers" v-if="v.InternshipState!=8" :label="v.UserName" :value="v.Id"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="3">
                        <el-select v-model="Sel.ViolationsYN" filterable required placeholder="请选择是否违章">
                            <el-option value="0" label="请选择是否违章">--请选择是否违章--</el-option>
                            <el-option value="1" label="已违章">--已违章--</el-option>
                            <el-option value="2" label="未违章">--未违章--</el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="3">
                        <el-select v-model="Sel.CarId" filterable required placeholder="请选择哪辆汽车">
                            <el-option value="0" label="请选择哪辆汽车">请选择哪辆汽车</el-option>
                            <el-option v-for="(v,k) in AllVehicle" :value="v.Id" :data-userid="v.Id" :label="v.CareName" v-text="v.CareName" />
                        </el-select>
                    </el-col>

                    <el-col :span="3">
                        <el-date-picker type="date"
                                        v-model="Start"
                                        value-format="yyyy-MM-dd"
                                        placeholder="车量开始时间">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="3">
                        <el-date-picker type="date"
                                        v-model="End"
                                        value-format="yyyy-MM-dd"
                                        placeholder="车量开始时间结束范围">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="1">
                        <el-button icon="el-icon-search" @click="GettableDB()"></el-button>
                    </el-col>
                    <el-col :span="1">
                        <el-button class="buttongroup" type="success" icon="el-icon-circle-plus-outline" @click="AddVehicleManagement">添加</el-button>
                    </el-col>
                </el-row>
            </el-form>

            <el-row style="padding-top: 10px">
                <el-col>
                    <el-table :data="tableData"
                              style="width: 100%"
                              ref="multipleTable"
                              :summary-method="getSummaries"
                              @selection-change="selectionLineChangeHandle"
                              border>
                        <el-table-column header-align="center" type="selection" align="center"></el-table-column>
                        <el-table-column header-align="center" fixed type="index" label="序号" align="center" width="50" :index="_indexMethod"></el-table-column>
                        <el-table-column header-align="center" prop="CareName" label="汽车品牌" align="center" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                {{AllTById(scope.row)}}
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" prop="ProjectName" label="用途" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column header-align="center" prop="UserId" label="使用人" width="100" align="center">
                            <template slot-scope="scope">
                                <label>{{AllUserNameByIdFc(scope.row.UserId)}}</label>
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" prop="StartTime" label="开始时间" :show-overflow-tooltip="true" align="center">
                            <template slot-scope="scope">
                                <label v-if="scope.row.StartTime==null">未知</label>
                                <label v-else>{{fmtDate(scope.row.StartTime)}}</label>
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" prop="PlanEndTime" label="预计结束时间" :show-overflow-tooltip="true" align="center">
                            <template slot-scope="scope">
                                <label v-if="scope.row.PlanEndTime==null">未知</label>
                                <label v-else>{{fmtDate(scope.row.PlanEndTime)}}</label>
                            </template>

                        </el-table-column>
                        <el-table-column header-align="center" prop="EndTime" label="结束时间" :show-overflow-tooltip="true" align="center">
                            <template slot-scope="scope">
                                <label v-if="scope.row.EndTime==null">未知</label>
                                <label v-else>{{fmtDate(scope.row.EndTime)}}</label>
                            </template>

                        </el-table-column>
                        <el-table-column header-align="center" prop="StartAddress" label="始发地" :show-overflow-tooltip="true" align="center">
                        </el-table-column>
                        <el-table-column header-align="center" prop="Destination" label="目的地" :show-overflow-tooltip="true" align="center">
                        </el-table-column>
                        <el-table-column header-align="center" prop="PurchaseDate" label="购车日期" width="120" align="center">
                            <template slot-scope="scope">
                                <label v-if="scope.row.Mileage==null">未知</label>
                                <label v-else>{{fmtDate(scope.row.PurchaseDate)}}</label>
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" prop="CareInsurance" label="里程起、止数" :show-overflow-tooltip="true" align="center">
                            <template slot-scope="scope">
                                <label>{{MileageStartFc(scope.row)}}</label>
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" prop="InsurancePremium" label="行驶里程数" :show-overflow-tooltip="true" align="center">
                            <template slot-scope="scope">

                                <label>{{SumMileageFc(scope.row)}}</label>
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" prop="WorkingCost" label="停车费/过路费" width="120" align="center">
                        </el-table-column>
                        <el-table-column header-align="center" prop="LicensePlate" label="是否违章" :show-overflow-tooltip="true" align="center">
                            <template slot-scope="scope">
                                <label v-if="scope.row.ViolationsYN==1">已违章</label>
                                <label v-else>未违章 </label>
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" prop="PersonLiableId" label="违章人员" :show-overflow-tooltip="true" align="center">
                            <template slot-scope="scope">
                                <label>{{AllUserNameByIdFc(scope.row.PersonLiableId)}}</label>
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" prop="CurrentState" label="是否处理" :show-overflow-tooltip="true" align="center">
                            <template slot-scope="scope">
                                <label>{{ CurrentStateFc(scope.row)}}</label>
                            </template>
                        </el-table-column>
            
                        <el-table-column header-align="center" prop="LicensePlate" label="汽车相册" :show-overflow-tooltip="true" align="center">
                            <template slot-scope="scope">
                                <el-button @click="GetImage(scope.row)" type="text" size="small">相册</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" prop="Note" label="备注" :show-overflow-tooltip="true" align="center">
                        </el-table-column>
                        <el-table-column header-align="center" prop="barDemo" label="操作" fixed="right" width="200" align="center">
                            <template slot-scope="scope">
                                <el-button type="primary" class="BtnSize" size="mini" plain @click="edit(scope.row)">编辑</el-button>
                                <el-button type="danger" class="BtnSize" size="mini" plain @click="Del(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
                <el-col :span="24">
                    <div class="block" style="float: right">
                        <el-pagination @size-change="GettableDB"
                                       @current-change="GettableDB"
                                       :current-page.sync="pagination.currentPage"
                                       :page-sizes="pagination.pagesizes"
                                       :page-size.sync="pagination.pagesize"
                                       layout="total, sizes, prev, pager, next, jumper"
                                       :total.sync="pagination.total">
                        </el-pagination>
                    </div>
                </el-col>
            </el-row>
        </div>

        <el-dialog :visible.sync="AddUsageRecordShow" title="添加车辆使用信息" width="70%">
            <AddUsageRecord :AllVehicle="AllVehicle"
                            :AllDepartment="AllDepartment"
                            :AllProject="AllProject"></AddUsageRecord>
        </el-dialog>

        <el-dialog :visible.sync="UpUsageRecordShow" title="修改车辆使用信息" width="70%">
            <UpUsageRecord :UpUsageRecordDB="UpUsageRecordDB"
                           :AllVehicle="AllVehicle"
                           :AllDepartment="AllDepartment"
                           :AllProject="AllProject"></UpUsageRecord>
        </el-dialog>


        <el-image-viewer v-if="showViewer"
                         :on-close="()=>{showViewer=false}"
                         :url-list="imgArray" />



    </div>
</template>




<script>
    import * as publicjs from "/public/Scriput/Public"
    import AddUsageRecord from "./AddUsageRecord";
    import UpUsageRecord from "./UpUsageRecord";
    export default {
        name: "UsageRecord",
        components: {
            AddUsageRecord,
            UpUsageRecord,
            'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
        },
        data() {
            return {
                showViewer: false,
                imgArray: false,
                UpUsageRecordShow: false,
                AddUsageRecordShow: false,
                AllUsers: [],
                //所有汽车数据
                AllVehicle: [],
                //表格查询数据
                Sel: {
                    UserId: 0,
                    CarId: "0",
                    ViolationsYN: '0',

                },
                Start: '',
                End: '',
                //表格数据
                tableData: [],
                //分页数据绑定
                pagination: {
                    currentPage: 1,
                    pagesizes: [10, 20, 30, 40, 50],
                    pagesize: 10,
                    total: 0
                },
                UpUsageRecordDB: {},
                //添加车辆使用信息
                AllDepartment: [],
                AllProject: [],

            }
        },
        created() {
            this.GettableDB();
            this.AllVehicle = publicjs.GetAllVehicle(this.$http);

            this.AllDepartment = publicjs.GetAllDepartment(this.$http);
            this.AllProject = publicjs.GetAllProject(this.$http);
            this.AllUsers = this.$store.state.AllUsers;
        },
        methods: {
            _indexMethod(index) {
                return ((this.pagination.currentPage - 1) * this.pagination.pagesize) + index + 1
            },
            selectionLineChangeHandle(val) {
                this.delidarray = val;
            },
            selectionLineChangeHandle() { },
            GettableDB() {
                const Loading = this.openLoading();
                this.$http.post("/VehicleManagement/GetUsageRecordDetail", {
                    usageRecord: this.Sel,
                    Start: this.Start,
                    End: this.End,
                    offset: this.pagination.currentPage,
                    limit: this.pagination.pagesize
                }).then(res => {
                    this.tableData = res.data.data;
                    this.pagination.total = res.data.count;
                    Loading.close();
                })
            },
            fmtDate(date) {
                if (date != null) {
                    var val = date.split(' ')[0]
                    return val == "0001-01-01" ? "暂未填写" : val;
                }
            },
            AnnualTimeFc(d) {
                if (d.AnnualTime == null || d.AnnualTime == "NaN") {
                    return "未知"
                } else {
                    var myDate = new Date();
                    var year = myDate.getFullYear();        //获取当前年
                    var month = myDate.getMonth() + 1;   //获取当前月
                    var date = myDate.getDate();
                    var timestamp = new Date(year - 1 + "/" + month + "/" + date).toLocaleDateString();
                    //注意上面生成的时间戳是13位，而DateToUnix方法中转换为了10位
                    var timestamp2 = new Date(this.fmtDate(d.AnnualTime)).toLocaleDateString();
                    if (timestamp2 < timestamp) {
                        return "未检修";
                    } else {
                        return "已检修";
                    }
                }
            },

            edit(obj) {
                this.UpUsageRecordDB = JSON.parse(JSON.stringify(obj));
                this.UpUsageRecordShow = true;
            },
            Del(obj) {
                this.$confirm('你确定要删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'error'
                }).then(() => {
                    let loadding = this.openLoading();
                    this.$http.post('/VehicleManagement/UsageRecordDelete', { id: obj.Id }).then(x => {
                        loadding.close();
                        if (x.data.bit) {
                            this.$message.success(x.data.mes);
                            this.GettableDB();
                        } else {
                            this.$message.error(x.data.mes);
                        }
                    })
                })
            },
            AddVehicleManagement() {
                this.AddUsageRecordShow = true;
            },
            MileageStartFc(d) {
                if (d.MileageEnd == null) {
                    return d.MileageStart + "- 暂未填写"
                }
                return d.MileageStart + "-" + d.MileageEnd;
            },
            SumMileageFc(d) {
                if (d.MileageEnd == null) {
                    return 0
                }
                return Number(d.MileageEnd) - Number(d.MileageStart);
            },
            AllUserNameByIdFc(id) {
                if (id != null && id != 0) {
                    return this.AllUsers.find(x => x.Id == id).UserName
                } else {
                    return "无";
                }
            },
            CurrentStateFc(d) {
                if (d.ViolationsYN == 1) {
                    if (d.CurrentState == 1) {
                        return "已处理"
                    } else {
                        return "暂未处理"
                    }
                } else {
                    return "没有违章信息"
                }
            },

            AllTById(d) {
                if (d.CarId != null & d.CarId != "") {
                    var veh = this.AllVehicle.find(x => x.Id == d.CarId);
                    if (veh != undefined) {
                        return veh.CareName
                    }

                }
            },
            getSummaries(param) {
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '总价';
                        return;
                    }
                    const values = data.map(item => Number(item[column.property]));
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
							if (!isNaN(value)) {
								let sum =  parseFloat(prev)  + parseFloat(curr)
								return sum.toFixed(2);
							} else {
								return prev.toFixed(2);
							}
                        }, 0);
                        sums[index] += '';
                    } else {
                    }
                })
            },

            async GetImage(obj) {
                this.GetImgPath("64,2," + obj.Id);
            },
            async GetImgPath(path) {
                this.imgArray = [];
                this.imgArray = await publicjs.GetAllFileByUrl(this.$http, path);
                console.log(this.imgArray)
                if (this.imgArray.length > 0) {
                    this.showViewer = true;
                } else {
                    this.$message.info("暂未上传图片");
                }
            },
        },
    }
</script>
<style scoped>
</style>